<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jspf/taglibs.jspf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="/styles/campaign.css">
    <link rel="stylesheet" href="/styles/jquery-ui.css">
    <link rel="stylesheet" href="/styles/blueimp-gallery.css">
    <link rel="stylesheet" type="text/css" href="/styles/swiper/swiper.min.css">
    <script type="text/javascript">
        localPath="ads"
    </script>
</head>
<body>
<div class="p-h-md p-v bg-white box-shadow pos-rlt">
    <h3 class="no-margin have-btn-title">广告管理</h3>
    <input type="hidden" id="adCount" value="${form.adCount}">
    <input type="hidden" id="limitAdCount" value="${userContext.member.limitAdCount}">
    <a href="javaScript:void(0)" type="button" id="add-advert" ui-sref="app.add"
       class="btn btn-sm btn-success ng-click-active pull-right"
       <c:if test="${userContext.fromBackend ==true}">style="display:none"</c:if>
    > <i class="glyphicon glyphicon-plus"></i>
        新建广告
    </a>
</div>
<div class="p-md">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="pull-right hidden-xs w">
            </div>
        </div>
        <table class="table table-bordered table-hover bg-white">
            <tr>
                <th>广告名称</th>
                <th>广告计划</th>
                <th>起止时间</th>
                <th>曝光量</th>
                <th>点击数</th>
                <th>点击率</th>
                <th>点击均价</th>
                <th>总花费</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <c:if test="${!empty form.memberFrontAdGourp}">
                <c:forEach items="${ form.memberFrontAdGourp}" var="ad">
                    <tr>
                        <td>
                            ${ad.frontAdGroup.title }
                        </td>
                        <c:choose>
                            <c:when test="${userContext.fromBackend ==true&&system==false}">
                                <td>${ad.frontAdGroup.frontCampaignName }</td>
                                <td>
                                    <!-- 起止时间 -->
                                    <c:choose>
                                        <c:when test="${ad.frontAdGroup.adPutType ==1}">
                                            不限
                                        </c:when>
                                        <c:otherwise>
                                            <fmt:formatDate value="${ad.frontAdGroup.adPutStartAt }"
                                                            pattern="yyyy-MM-dd"/>-
                                            <fmt:formatDate value="${ad.frontAdGroup.adPutEndAt }"
                                                            pattern="yyyy-MM-dd"/>
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </c:when>
                            <c:otherwise>
                                <td>
                                    <a href="/campaigns/sitetype/${ad.frontAdGroup.frontCampaignId }?sitesetType=${ad.frontAdGroup.frontCampaignType }">${ad.frontAdGroup.frontCampaignName }</a>
                                </td>
                                <td>
                                    <!-- 起止时间 -->
                                    <c:choose>
                                        <c:when test="${ad.frontAdGroup.adPutType ==1}">
                                            不限
                                        </c:when>
                                        <c:otherwise>
                                            <fmt:formatDate value="${ad.frontAdGroup.adPutStartAt }"
                                                            pattern="yyyy-MM-dd"/>-
                                            <fmt:formatDate value="${ad.frontAdGroup.adPutEndAt }"
                                                            pattern="yyyy-MM-dd"/>
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                                <td>${ad.viewNum }</td>
                                <td>${ad.clickNum }</td>
                                <td><fmt:formatNumber value="${ad.ctr }" maxFractionDigits="2"/>%</td>
                                <td>￥<fmt:formatNumber value="${ad.costPerClick }" maxFractionDigits="2"/></td>
                                <td>￥<fmt:formatNumber value="${ad.cost }" maxFractionDigits="2"/></td>
                            </c:otherwise>
                        </c:choose>
                        <td>
                            <c:choose>
                                <c:when test="${ad.frontAdGroup.frontAdGroupType ==1||ad.frontAdGroup.frontAdGroupType==6}">
                                    <div class="text-warning-dk">审核中</div>
                                </c:when>
                                <c:when test="${ad.frontAdGroup.frontAdGroupType ==2}">
                                    <c:set var="nowDate" value="<%=System.currentTimeMillis()%>"></c:set>
                                    <c:choose>
                                        <c:when test="${ad.frontAdGroup.adPutType ==1}">
                                            <c:choose>
                                                <c:when test="${ad.frontAdGroup.adOffer<ad.minAdOffer}">
                                                    <div class="text-warning-dk">出价过低</div>
                                                </c:when>
                                                <c:otherwise>
                                                    <div class="text-success-dk">投放中</div>
                                                </c:otherwise>
                                            </c:choose>
                                        </c:when>
                                        <c:otherwise>
                                            <c:choose>
                                                <c:when test="${nowDate-ad.frontAdGroup.adPutStartAt.time<0}">
                                                    <div class="text-warning-dk">未开始</div>
                                                </c:when>
                                                <c:when test="${nowDate-ad.frontAdGroup.adPutStartAt.time>0&&nowDate-ad.frontAdGroup.adPutEndAt.time<0}">
                                                    <c:choose>
                                                        <c:when test="${ad.frontAdGroup.adOffer<ad.minAdOffer}">
                                                            <div class="text-warning-dk">出价过低</div>
                                                        </c:when>
                                                        <c:otherwise>
                                                            <div class="text-success-dk">投放中</div>
                                                        </c:otherwise>
                                                    </c:choose>
                                                </c:when>
                                                <c:when test="${nowDate-ad.frontAdGroup.adPutEndAt.time>0}">
                                                    <div class="text-danger-dk">已结束</div>
                                                </c:when>
                                            </c:choose>
                                        </c:otherwise>
                                    </c:choose>
                                </c:when>
                                <c:when test="${ad.frontAdGroup.frontAdGroupType ==3}">
                                    <div class="text-warning-dk">暂停</div>
                                </c:when>
                                <%--<c:when test="${ad.frontAdGroup.frontAdGroupType ==4}">--%>
                                    <%--<div class="text-warning-dk">出价过低</div>--%>
                                <%--</c:when>--%>
                                <c:when test="${ad.frontAdGroup.frontAdGroupType ==5}">
                                    <div class="text-danger-dk">审核不通过</div>
                                </c:when>
                                <c:otherwise>
                                    <div class="text-danger-dk">已结束</div>
                                </c:otherwise>
                            </c:choose>
                        </td>
                        <td ng-controller="AsideDemoCtrl" class="ng-scope">

                            <div class="col-md-12" id="advert-list-action">
                                <a name="slideshow" onclick="preview(${ad.frontAdGroup.id})" class="ng-scope">预览</a>
                                    <a href="/ads/edit?frontAdGroupId=${ad.frontAdGroup.id}"
                                       <c:if test="${userContext.fromBackend ==true}">style="display:none"</c:if>
                                    >编辑</a>
                                    <c:if test="${ad.frontAdGroup.frontAdGroupType !=2}">
                                        <a name="delete" href="javascript:deleteAdGroup(${ad.frontAdGroup.id },${ ad.frontAdGroup.frontAdGroupType})"
                                           <c:if test="${userContext.fromBackend ==true}">style="display:none"</c:if>
                                        >删除</a>
                                    </c:if>
                                    <c:if test="${ad.frontAdGroup.frontAdGroupType ==5}">
                                        <a href="javascript:void(0)" onclick="reason(${ad.frontAdGroup.id})">原因</a>
                                    </c:if>
                                    <c:forEach items="${ form.frontCampaigns}" var="frontCampaign">
                                        <c:if test="${frontCampaign.campaignType==ad.frontAdGroup.frontCampaignType&&frontCampaign.campaignStatus==1}">
                                            <c:if test="${ad.frontAdGroup.frontAdGroupType ==2}">
                                                <a href="javascript:void(0)" onclick="changeAdGroupType(${ad.frontAdGroup.id},1)" <c:if test="${userContext.fromBackend ==true}">style="display:none"</c:if>>暂停</a>
                                            </c:if>
                                            <c:if test="${ad.frontAdGroup.frontAdGroupType ==3}">
                                                <a href="javascript:void(0)" onclick="changeAdGroupType(${ad.frontAdGroup.id},2)" <c:if test="${userContext.fromBackend ==true}">style="display:none"</c:if>>投放</a>
                                            </c:if>
                                        </c:if>
                                    </c:forEach>
                            </div>
                        </td>
                    </tr>
                </c:forEach>
            </c:if>
        </table>
        <div class="text-center">
            <airad:pagination pageSize="${form.page.pageSize }"
                              href="/ads/list?pageNumber=PAGENUM"
                              totalRecord="${form.page.totalCount }"
                              currentPage="${form.page.pageNumber }"
            >
            </airad:pagination>
        </div>
    </div>
</div>
<!-- Swiper -->
<div class="swiper-container hide">
    <div class="swiper-wrapper">
    </div>
    <!-- 关闭轮播 -->
    <i class="close-swiper glyphicon glyphicon-remove"></i>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
<div id="links" style="display:none"></div>
<!-- The dialog widget -->
<div id="blueimp-gallery-dialog" data-show="fade" data-hide="fade">
    <!-- The Gallery widget  -->
    <div class="blueimp-gallery blueimp-gallery-carousel blueimp-gallery-controls" style="z-index: 999">
        <div class="slides"></div>
        <a class="prev">‹</a>
        <a class="next">›</a>
        <a class="play-pause"></a>
    </div>
</div>
<!-- Swiper JS -->
<script src="/js/swiper/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script type="text/javascript">
    $().ready(function(){
        //判断广告创建数量是否超过限制
        $("#add-advert").click(function(){
            var adCount = parseInt($("#adCount").val());
            var limitAdCount = parseInt($("#limitAdCount").val());
            if(adCount<limitAdCount){
                window.location.href = "/ads/add?"+Math.random();
            }else{
                bootbox.dialog({
                    title: "提示",
                    message: "您创建的广告数量已超出最大限制，如需增加，请联系海量通。",
                    buttons: {
                        "success": {
                            "label": "<i class='icon-ok'></i> 确定",
                            "className": "btn-sm btn-primary",
                            "callback": function () {
                                return;
                            }
                        }
                    }
                })
            }
        })
    })
    function deleteAdGroup(adGroupId, type) {
        bootbox.dialog({
            title: "删除广告提示",
            message: "<div>是否真的要删除广告？</div><p>广告删除后，广告投放数据会被同时删除。</p>",
            buttons: {
                "success": {
                    "label": "<i class='icon-ok'></i> 确定",
                    "className": "btn-sm btn-primary",
                    "callback": function () {
                        $.ajax({
                            url: "/ads/delete/" + adGroupId,
                            type: "POST",
                            dataType: "json",
                            cache: false,
                            success: function (data) {
                                if (data = "success") {
                                    showMsg("success","删除广告成功！");
                                    setTimeout("location.reload()", 1000);
                                }
                            }
                        })

                    }
                },
                "cancel": {
                    "label": "<i class='icon-info'></i> 取消",
                    "className": "btn-sm btn-default",
                    "callback": function () {
                    }
                }
            }
        });

// 	}
    }

    function preview(adGroupId) {
        $.ajax({
            url: "/common/new_creatives/" + adGroupId,
            type: "GET",
            dataType: "json",
            cache: false,
            success: function (data) {
                console.log(data)
                $('.swiper-wrapper').empty();
                var length = data.length;
                var t = simpleTpl();
                if(length>0){
                    for(var i=0;i<length;i++){
                        if(data[i].type==1){
                            if (data[i].bannerPath2 == "" && data[i].bannerPath3 == "") {
                                var imgList = '<div class="cy-img-list one"><img src="'+data[i].bannerShowPath1+'"></div>'
                            } else {
                                var imgList = '<div class="cy-img-list three"><img src="'+data[i].bannerShowPath1+'"><img src="'+data[i].bannerShowPath2+'"><img src="'+data[i].bannerShowPath3+'"></div>'
                            }
                            t._('<div class="swiper-slide col-sm-12">')
                            t._('<div class="cy-item col-sm-12">')
                            t._('<div class="panel b-a cy-materials-item" name="creativeSelect">')
                            t._('<input type="hidden" value="' + data[i].id + '"/>')
                            t._('<div class="panel-heading bg text-lt">')
                            t._('<span>' + data[i].creativeName + '</span>')
                            t._('</div>')
                            t._('<div class="content">')
                            t._('<div class="sb">')
                            t._('<img src="' + data[i].trademarkShowPath + '" class="sb-icon">')
                            t._('<span class="sb-name">' + data[i].trademarkName + '</span>')
                            t._('</div>')
                            t._('<p class="cy-txt">'+data[i].creativeCopywriter+'</p>')
                            t._(imgList)
                            t._('</div>')
                            t._('</div>')
                            t._('</div>')
                            t._('</div>')
                        }
                        if (data[i].type == 2) {
                            t._('<div class="swiper-slide col-sm-12">')
                            t._('<div class="cy-item col-sm-12">')
                            t._('<div class="panel b-a cy-materials-item" name="creativeSelect">')
                            t._('<input type="hidden" value="' + data[i].id + '"/>')
                            t._('<div class="panel-heading bg text-lt">')
                            t._('<span>' + data[i].creativeName + '</span>')
                            t._('</div>')
                            t._('<div class="content">')
                            t._('<p class="cy-txt mt">'+data[i].creativeCopywriter+'</p>')
                            t._('<div class="cy-img-list one mt">')
                            t._('<img src="' + data[i].bannerShowPath1 + '">')
                            t._('</div>')
                            t._('</div>')
                            t._('</div>')
                            t._('</div>')
                            t._('</div>')
                        }
                        if (data[i].type == 3) {
                            t._('<div class="swiper-slide col-sm-12">')
                            t._('<div class="cy-item col-sm-12">')
                            t._('<div class="panel b-a cy-materials-item" name="creativeSelect">')
                            t._('<input type="hidden" value="' + data[i].id + '"/>')
                            t._('<div class="panel-heading bg text-lt">')
                            t._('<span>' + data[i].creativeName + '</span>')
                            t._('</div>')
                            t._('<div class="content">')
                            t._('<div class="sb no-lineHeight">')
                            t._('<img src="' + data[i].shareShowPath + '" class="sb-icon">')
                            t._('<div class="sb-name-container have-desc-sbName">')
                            t._('<p class="sb-name">' + data[i].shareTitle + '</p>')
                            t._('<p class="sb-desc">' + data[i].shareDescribe + '</p>')
                            t._('</div>')
                            t._('</div>')
                            t._('<p class="cy-txt">'+data[i].creativeCopywriter+'</p>')
                            t._('<div class="cy-img-list one">')
                            t._('<img src="' + data[i].bannerShowPath1 + '">')
                            t._('</div>')
                            t._('</div>')
                            t._('</div>')
                            t._('</div>')
                            t._('</div>')
                        }
                        if (data[i].type == 4) {
                            t._('<div class="swiper-slide col-sm-12">')
                            t._('<div class="cy-item col-sm-12">')
                            t._('<div class="panel b-a cy-materials-item" name="creativeSelect">')
                            t._('<input type="hidden" value="' + data[i].id + '"/>')
                            t._('<div class="panel-heading bg text-lt">')
                            t._('<span>' + data[i].creativeName + '</span>')
                            t._('</div>')
                            t._('<div class="content">')
                            t._('<div class="cy-img-list one mt">')
                            t._('<img src="' + data[i].bannerShowPath1 + '">')
                            t._('</div>')
                            t._('</div>')
                            t._('</div>')
                            t._('</div>')
                            t._('</div>')
                        }
                        if (data[i].type == 5) {
                            if (data[i].bannerPath2 == "" && data[i].bannerPath3 == "") {
                                var imgList = '<div class="cy-img-list one"><img src="' + data[i].bannerShowPath1 + '"></div>'
                            } else {
                                var imgList = '<div class="cy-img-list three"><img src="' + data[i].bannerShowPath1 + '"><img src="' + data[i].bannerShowPath2 + '"><img src="' + data[i].bannerShowPath3 + '"></div>'
                            }
                            t._('<div class="swiper-slide col-sm-12">')
                            t._('<div class="cy-item col-sm-12">')
                            t._('<div class="panel b-a cy-materials-item" name="creativeSelect">')
                            t._('<input type="hidden" value="' + data[i].id + '"/>')
                            t._('<div class="panel-heading bg text-lt">')
                            t._('<span>' + data[i].creativeName + '</span>')
                            t._('</div>')
                            t._('<div class="content">')
                            t._('<div class="sb">')
                            t._('<span class="sb-name">' + data[i].trademarkName + '</span>')
                            t._('</div>')
                            t._('<p class="cy-txt">'+data[i].creativeCopywriter+'</p>')
                            t._(imgList)
                            t._('</div>')
                            t._('</div>')
                            t._('</div>')
                            t._('</div>')
                        }
                    }
                    $('.swiper-wrapper').append(t.toString());
                    
                   
                    // 蒙层
                    var w = $(document).width();
                    var h = $(document).height();
                    $('body').append('<div class="modal-g"></div>');
                    $('body').find('.modal-g').css({
                        width: w,
                        height: h
                    }).removeClass('hide');
                    // 轮播图
                    var len = $('.swiper-wrapper').find('.swiper-slide').length;


                    $('.swiper-container').removeClass('hide');


                    if (len == 1) {
                        var swiper = new Swiper('.swiper-container', {
                            pagination: '.swiper-pagination',
                            nextButton: '.swiper-button-next',
                            prevButton: '.swiper-button-prev',
                            paginationClickable: true,
                            spaceBetween: 30,
                            centeredSlides: true,
                            observer:true,
                            onInit: function(swiper){
                              //Swiper初始化了
                              swiper.setWrapperTranslate(0);
                              //alert(swiper.activeIndex);提示Swiper的当前索引
                            },
                            autoplay: 2500,
                            autoplayDisableOnInteraction: false
                        });
                    } else {
                        var swiper = new Swiper('.swiper-container', {
                            pagination: '.swiper-pagination',
                            nextButton: '.swiper-button-next',
                            prevButton: '.swiper-button-prev',
                            paginationClickable: true,
                            spaceBetween: 30,
                            centeredSlides: true,
                            observer:true,
                            autoplay: 2500,
                            autoplayDisableOnInteraction: false
                        });                     
                    } 



                    // 关闭轮播
                    $('.close-swiper').on('click', function() {
                        $('body').find('.modal-g').remove();
                        $('.swiper-container').addClass('hide');
                    });
                    $('.modal-g').on('click', function() {
                        $('.close-swiper').trigger('click');
                    });
                }
            }
        })
    }
    function reason(id) {
        $.ajax({
            url: "/ads/audit/reason/" + id,
            type: "GET",
            dataType: "json",
            cache: false,
            success: function (data) {
                bootbox.dialog({
                    title: "广告审核不通过原因",
                    message: data,
                    buttons: {
                        "success": {
                            "label": "<i class='icon-ok'></i> 确定",
                            "className": "btn-sm btn-primary",
                            "callback": function () {

                            }
                        }
                    }
                });
            }
        });
    }
    function changeAdGroupType(id,type){
        if(type==1){
            bootbox.dialog({
                title: "暂停广告提示",
                message: "<div>是否真的要暂停广告？</div><p>广告暂停后，广告的权重会下降，影响广告投放效果。</p>",
                buttons: {
                    "success": {
                        "label": "<i class='icon-ok'></i> 确定",
                        "className": "btn-sm btn-primary",
                        "callback": function () {
                            $.ajax({
                                url: "/ads/suspend_or_start/" + id,
                                type: "POST",
                                dataType: "json",
                                cache: false,
                                success: function (data) {
                                    if("success"==data){
                                        location.reload();
                                    }
                                }
                            });
                        }
                    },
                    "cancel": {
                        "label": "<i class='icon-info'></i> 取消",
                        "className": "btn-sm btn-default",
                        "callback": function () {
                        }
                    }
                }
            });
        }else{
            $.ajax({
                url: "/ads/suspend_or_start/" + id,
                type: "POST",
                dataType: "json",
                cache: false,
                success: function (data) {
                    if("success"==data){
                        location.reload();
                    }
                }
            });
        }
    }
</script>
<script src="/js/gallery/blueimp-gallery.js"></script>
<script src="/js/gallery/jquery.blueimp-gallery.js"></script>
<script src="/js/gallery/jquery.image-gallery.js"></script>
</body>
</html>